<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:400px;border: solid 1px black;margin: 50px auto;}
        .box1 .cont{position:relative;}
        .box1 h2{margin:10px 0;padding:10px 0;background: #efefef;}
        .box1 p{position: absolute;left:0;top:0;margin: 0;background: #ccc;width:200px;font-size: 14px;display: none;z-index: 1;}
        .box1 em{position: absolute;left:0;top:0;right:0;bottom:0;z-index: 2;}

        /*  */

        .box2{position: relative;}
        .box2 span{top:0;left: 0;position:absolute;color: red;}

        /*  */

        .a{width:20px;height:20px;background: black;color: #fff;text-align: center;line-height: 20px;position: absolute;left:-20px;top:-20px;}

    </style>
</head>
<body>
    <div class="box1">
        <div class="cont">
            <h2>这是标题1111</h2>
            <p>111这是提示信息这是提示信息这是提示信息这是提示信息这是提示信息111这是提示信息这是提示信息这是提示信息这是提示信息这是提示信息111这是提示</p>
            <em></em>
        </div>
        <div class="cont">
            <h2>这是标题222是标题222是标</h2>
            <p>222这是提示信息这是提示信息这是提示信息这是提示信息这是提示信息是提示信息这是提示信息这是提示信息这是提示信息这是提示信息是提示信息这是提示信息这是提示信息这是提示信息这是提示信息是提示信息这是提示信息这是提示信息这是提示信息这是提示信息是提示信息这是提示信息这是提示信息这是提示信息这是提示信息</p>
            <em></em>
        </div>
    </div>

    <!--  -->

    <input type="text" placeholder="这是默认提示" value="a">
    <div class="box2">
        <input type="text" class="txt" value="">
        <span>这是默认提示</span>
    </div>

    <!--  -->

    <div class="a">0</div>
    <div class="a">1</div>
    <div class="a">2</div>
    <div class="a">3</div>
    <div class="a">4</div>
    <div class="a">5</div>
    <div class="a">6</div>
    <div class="a">7</div>
    <div class="a">8</div>
    <div class="a">9</div>
</body>
<script>
    // 1. 事件源的选择
    // var ah2 = document.querySelectorAll(".cont h2")
    // var ah2 = document.querySelectorAll(".cont")
    var ah2 = document.querySelectorAll(".cont em")

    var ap = document.querySelectorAll(".cont p")

    for(var i=0;i<ah2.length;i++){

        ah2[i].index = i;
        // 进入
        ah2[i].onmouseover = function(){
            // 显示
            ap[this.index].style.display = "block";
        }
        // 离开
        ah2[i].onmouseout = function(){
            // 隐藏
            ap[this.index].style.display = "none";
        }
        // 移动
        ah2[i].onmousemove = function(eve){
            var e = eve || window.event;
            // 2. 坐标类属性的选择
            // 使用相对于事件目标（注意问题）设置元素的跟随
            // 借助了布局中的元素，解决事件目标的问题
            ap[this.index].style.left = e.offsetX + "px";
            ap[this.index].style.top = e.offsetY + "px";
            // 也可以使用相对于页面的坐标，通过坐标的计算，获取到正确位置
            // ap[this.index].style.left = e.pageX - this.offsetLeft + "px";
            // ap[this.index].style.top = e.pageY - this.offsetTop + "px";

            // 3. 事件源的选择（事件冒泡）
            // 未处理
        }
    }


    // -------------

    var otxt = document.querySelector(".box2 .txt")
    var ospan = document.querySelector(".box2 span")
    // 初始判断输入框是否存在内容，决定是否显示提示
    if(otxt.value.length === 0){
        ospan.style.display = "block"
    }else{
        ospan.style.display = "none"
    }

    // 输入框被输入内容时
    otxt.oninput = function(){
        // 判断输入框是否存在内容，决定是否显示提示
        if(this.value.length === 0){
            ospan.style.display = "block"
        }else{
            ospan.style.display = "none"
        }
    }

    // 禁止提示文字被选中
    ospan.onmousedown = function(eve){
        var e = eve || window.event;
        e.preventDefault();
    }

    // ----------

    var aA = document.querySelectorAll(".a");
    
    document.onmousemove = function(eve){
        var e = eve || window.event;

        // e.pageX
        // e.pageY

        // 问题：如果从前向后操作，前一个元素改变了位置之后，后一个元素找到的就是前一个元素的新位置，找不到老位置
        // 解决：从后向前操作，后一个元素先找前一个元素的位置，依次类推，直到第0个元素，找鼠标的位置

        // 先从最后一个元素开始操作
        for(var i=aA.length-1;i>0;i--){
            aA[i].style.left = aA[i-1].offsetLeft + "px";
            aA[i].style.top = aA[i-1].offsetTop + "px";
        }

        // 第0个元素找鼠标的位置
        aA[0].style.left = e.pageX + "px";
        aA[0].style.top = e.pageY + "px";
    }
    



</script>
</html>